import React, { PureComponent, Fragment, Component } from 'react';
import { connect } from 'dva';
import {
	Row,
	Col,
	Card,
	Form,
	Input,
	Radio,
	Select,
	Icon,
	Button,
	Upload,
	List,
	Modal,
	message,
	Badge,
	TreeSelect,
	Tag,
	Checkbox,
	InputNumber,
} from 'antd';
import ListForm from './ListForm';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './ContentEdit.less';
import ChooseAuthorModal from 'components/Content/ChooseAuthorModal';
import ChooseTagModal from 'components/Content/ChooseTagModal';

import { routerRedux } from 'dva/router';
import { imgPrex } from '../../utils/constData';
const CheckboxGroup = Checkbox.Group;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;
const { Option } = Select;
const { CheckableTag } = Tag;
const formItemLayout1 = {
	labelCol: {
		xs: { span: 14 },
		sm: { span: 2 },
		md: { span: 2 },
		lg: { span: 2 },
	},
	wrapperCol: {
		xs: { span: 8 },
		sm: { span: 8 },
		md: { span: 8 },
		lg: { span: 8 },
	},
};
const formItemLayout = { labelCol: { span: 3 }, wrapperCol: { span: 15 } };

const priceItemLayout = {
	labelCol: {
		xs: { span: 12 },
		sm: { span: 8 },
		md: { span: 8 },
		lg: { span: 8 },
	},
	wrapperCol: {
		xs: { span: 14 },
		sm: { span: 9 },
		md: { span: 9 },
		lg: { span: 9 },
	},
};

const tailFormItemLayout = {
	wrapperCol: {
		xs: { span: 24, offset: 0 },
		sm: { span: 16, offset: 2 },
	},
};

const CreateBookletForm = Form.create()(props => {
	const {
		modalVisible,
		form,
		title,
		bookletRecord,
		goodsId,
		bookletFileList,
		bookletModalVisible,
		bookletOk,
		bookNormFile,
    handelLoadingStatus,
		_this,
	} = props;
	const okHandle = () => {
    console.log(_this.state.loadingstatus)
		form.validateFields((err, fieldsValue) => {
			if (err) return;
      if(_this.state.loadingstatus) return;
      handelLoadingStatus()
			bookletOk(false, fieldsValue, form);
		});
	};

  //const 

	const bookletUploadProps = {
		// action: '//jsonplaceholder.typicode.com/posts/',
		onRemove: file => {
			_this.setState(({ fileList }) => {
				const index = fileList.indexOf(file);
				const newFileList = fileList.slice();
				newFileList.splice(index, 1);
				return {
					bookletFileList: newFileList,
					bookletFile: null,
				};
			});
			// console.log(_this.props.form.getFieldsValue('name1'))
			form.setFieldsValue({
				name1: bookletRecord && bookletRecord.bookletImg ? bookletRecord.bookletImg : null,
			});
		},
		beforeUpload: file => {
			const isLt1M = file.size / 1024 / 1024 < 1;
			if (!isLt1M) {
				message.error('图片大小不能超过1M');
				return false;
			}
			_this.setState(({ fileList }) => ({
				bookletFileList: [file],
				bookletFile: file,
				bookletImage: null,
			}));

			return false;
		},
		fileList: bookletFileList,
	};

	return (
		<Modal
			destroyOnClose
			title={
				title +
				(bookletRecord
					? bookletRecord.bookletName
						? bookletRecord.bookletName
						: '  添加册集'
					: '  添加册集')
			}
			visible={modalVisible}
			onOk={okHandle}
			onCancel={() => bookletModalVisible(false)}
		>
			{bookletRecord ? (
				<FormItem
					labelCol={{ span: 4 }}
					wrapperCol={{ span: 18 }}
					label="goodsId"
					style={{ display: 'none' }}
				>
					{form.getFieldDecorator('bookletId', {
						initialValue: bookletRecord ? bookletRecord.bookletId : null,
						rules: [{ required: true, message: '请输入bookletId' }],
					})(<Input placeholder="请输入bookletId" maxLength="10" />)}
				</FormItem>
			) : null}

			<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="封面">
				{form.getFieldDecorator('name1', {
					valuePropName: 'file',
					getValueFromEvent: bookNormFile,
					rules: [{ required: true, message: '请选择封面' }],
					initialValue: bookletRecord ? bookletRecord.bookletImg : null,
				})(
					<Upload {...bookletUploadProps}>
						<Button>
							<Icon type="upload" />浏览
						</Button>
					</Upload>
				)}
				{bookletRecord &&
				bookletRecord.bookletImg &&
				!(bookletFileList && bookletFileList.length > 0) ? (
					<img src={imgPrex + bookletRecord.bookletImg} style={{ width: 50 }} />
				) : null}
			</FormItem>
			<FormItem
				labelCol={{ span: 4 }}
				wrapperCol={{ span: 18 }}
				label="goodsId"
				style={{ display: 'none' }}
			>
				{form.getFieldDecorator('goodsId', {
					initialValue: goodsId ? goodsId : null,
					rules: [{ required: true, message: '请输入goodsId' }],
				})(<Input placeholder="请输入goodsId" maxLength="10" />)}
			</FormItem>

			<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="序号">
				{form.getFieldDecorator('bookletSeq', {
					initialValue: bookletRecord ? bookletRecord.bookletSeq : null,
					rules: [{ required: true, message: '请输入序号' }],
				})(
					<InputNumber
						min={1}
						step={1}
						precision={0}
						placeholder="请输入序号"
						style={{ width: '60%' }}
					/>
				)}
			</FormItem>
			<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="名称">
				{form.getFieldDecorator('bookletName', {
					initialValue: bookletRecord ? bookletRecord.bookletName : null,
					rules: [
						{
							required: true,
							message: '名称不能为空',
						},
					],
				})(<Input placeholder="请输入名称" maxLength="200" />)}
			</FormItem>
			<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="链接">
				{form.getFieldDecorator('bookletUrl', {
					initialValue: bookletRecord ? bookletRecord.bookletUrl : null,
					rules: [{ required: true, message: '请输入链接' }],
				})(<Input placeholder="请输入链接" maxLength="400" />)}
			</FormItem>
			<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="播放时长">
				{form.getFieldDecorator('durationTime', {
					initialValue: bookletRecord ? bookletRecord.durationTime : null,
					rules: [{ required: true, message: '请输入播放时长' }],
				})(
					<InputNumber
						min={1}
						step={1}
						precision={0}
						placeholder="请输入播放时长"
						style={{ width: '60%' }}
					/>
				)}
			</FormItem>
			<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="视频ID">
				{form.getFieldDecorator('videoId', {
					initialValue: bookletRecord ? bookletRecord.videoId : null,
					rules: [{ required: true, message: '请输入视频ID' }],
				})(<Input placeholder="请输入视频ID" maxLength="20" />)}
			</FormItem>
			<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="第三方ID">
				{form.getFieldDecorator('thirdPartyId', {
					initialValue: bookletRecord ? bookletRecord.thirdPartyId : null,
					rules: [{ required: true, message: '请输入视频ID' }],
				})(<Input placeholder="请输入视频ID" maxLength="20" />)}
			</FormItem>

			<FormItem
				labelCol={{ span: 4 }}
				wrapperCol={{ span: 18 }}
				label="学习类型"
				style={{ display: 'none' }}
			>
				{form.getFieldDecorator('bookletType', {
					initialValue: bookletRecord ? bookletRecord.bookletType : 0,
					rules: [{ required: true, message: '请输入学习类型' }],
				})(<Input placeholder="请输入学习类型" maxLength="200" />)}
			</FormItem>

			<FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="是否免费：">
				{form.getFieldDecorator('isFree', {
					initialValue: bookletRecord ? bookletRecord.isFree + '' : null,
				})(
					<CheckboxGroup>
						<Checkbox value={'0'} />
					</CheckboxGroup>
				)}
			</FormItem>

			<FormItem
				labelCol={{ span: 4 }}
				wrapperCol={{ span: 18 }}
				label="单位"
				style={{ display: 'none' }}
			>
				{form.getFieldDecorator('bookletUnit', {
					initialValue: bookletRecord ? bookletRecord.bookletUnit : '集',
					rules: [{ required: true, message: '请输入单位' }],
				})(<Input placeholder="请输入单位" maxLength="200" />)}
			</FormItem>
		</Modal>
	);
});

@connect(({ content, loading }) => ({
	content,
	channelTree: content.channelTree,
	tagList: content.tagList,
	loading: loading.models.content,
}))
@Form.create()
export default class ContentAdd extends PureComponent {
	state = {
		authorModalVisible: false,
		tagModalVisible: false,
		bookletFormVisible: false,

		record: null,
		fileList: [],
		file: null,
		image: null,

		bookletFileList: [],
		bookletFile: null,
		bookletImage: null,

		bookletList: [],

		bookletRecord: null,
		saveContentLoading: false, // 用于表单的防重复提交
    loadingstatus:false,
	};


	componentDidMount() {
		if (this.props.match.params.goodsId != 'new') {
			this.props.dispatch({
				type: 'content/fetchGoodsDetail',
				payload: { goodsId: this.props.match.params.goodsId },
				callback: data => this.setState({ record: data }),
			});
		}

		this.props.dispatch({
			type: 'content/fetchChannelTree',
			payload: {},
		});

		this.props.dispatch({
			type: 'content/fetchTagList',
			payload: { labelType: 1 },
		});

		this.props.dispatch({
			type: 'content/fetchAuthorList',
			payload: { pageNum: 1, pageSize: 0 },
		});
	}

	handleAppChange = e => {};

	handleAuthorModalVisible = flag => {
		this.setState({ authorFormVisible: !!flag });
	};

	checkOriginalPrice = (rule, value, callback) => {
		const { getFieldValue } = this.props.form;
		if (value && value < getFieldValue('discountPrice')) {
			callback('原价不能小于售价！');
		}

		// Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应
		callback();
	};

	submit = () => {
		const { saveContentLoading } = this.state;
		this.props.form.validateFields((err, fieldsValue) => {
			if (err) return;
			if (saveContentLoading) {
				return;
			}
			this.state.saveContentLoading = true;
			this.setState({ saveContentLoading: this.state.saveContentLoading });
			console.log('表单提交图片：：：：？？？', this.state.file);

			let tags = fieldsValue.labelList;
			let newTags = [];
			if (tags) {
				for (let i = 0; i < tags.length; i++) {
					newTags.push({ labelId: tags[i].labelId });
				}
			}
			if (typeof fieldsValue.goodsRank === 'string') {
				var values = {
					...fieldsValue,
					name: this.state.file,
					labelList: fieldsValue.labelList.map(item => {
						if ('labelName' in item) {
							delete item.labelName;
						}
						return item;
					}),
				};
			} else {
				var arrays = fieldsValue.goodsRank;
				var thatgoodsRank = '';
				for (var i = 0; i < arrays.length; i++) {
					if (arrays[i] == 0 || arrays[i] == 1 || arrays[i] == 2) {
						thatgoodsRank += arrays[i] + ',';
					}
				}
				var values = {
					...fieldsValue,
					labelList: fieldsValue.labelList.map(item => {
						if ('labelName' in item) {
							delete item.labelName;
						}
						return item;
					}),
					goodsRank: thatgoodsRank.substring(0, thatgoodsRank.length - 1),
				};
			}

			console.log('表单提交数据：：：：？？？', values);

			if (values.goodsId) {
				this.props.dispatch({
					type: 'content/editContent',
					payload: values,
					callback: returnData => this._callback(returnData),
				});
			} else {
				this.props.dispatch({
					type: 'content/addContent',
					payload: values,
					callback: returnData => this._callback(returnData),
				});
			}
		});
	};

	_callback(returnData) {
		console.log(returnData);
		this.props.dispatch(routerRedux.goBack());
		this.setState({
			record: returnData,
			fileList: [],
			file: null,
			saveContentLoading: false,
		});
	}

	_setAuthorModalVisible(flag) {
		if (!flag) {
			this.setState({});
			this._authorSearch();
		}
		this.setState({ authorModalVisible: flag });
	}

	_authorSearch(search) {
		console.log('search', search);
		this.props.dispatch({
			type: 'content/fetchAuthorList',
			payload: { authorName: search, pageNum: 1, pageSize: 0 },
		});
	}

	_chooseAuthor(author) {
		console.log('_chooseAuthor', author);
		this.props.form.setFieldsValue({ authorId: author.authorId, authorName: author.authorName });
		this._setAuthorModalVisible(false);
		console.log(this.props.form.getFieldValue('authorId'));
	}

	_setTagModalVisible(flag) {
		if (!flag) {
			this.props.dispatch({
				type: 'content/fetchTagList',
				payload: { labelType: 1 },
			});
		}
		this.setState({ tagModalVisible: flag });
	}

	_tagSearch(search) {
		console.log('search', search);
		this.props.dispatch({
			type: 'content/fetchTagList',
			payload: { labelName: search, labelType: 1 },
		});
	}

	_chooseTags(tags) {
		console.log('_chooseTags', tags);
		this.props.form.setFieldsValue({ labelList: tags });
		this._setTagModalVisible(false);
		console.log(this.props.form.getFieldValue('labelList'));
	}

	_deleteTag(deleteTag) {
		console.log('delete tag', deleteTag);

		const newLabelList = this.props.form.getFieldValue('labelList').filter(tag => tag !== deleteTag);
		console.log('newLabelList', newLabelList);
		this.props.form.setFieldsValue({ labelList: newLabelList });
	}

	_bookletModalVisible(flag, item) {
		console.log('item bookletrecord', item);
		if (!flag) {
			this.setState({
				bookletRecord: null,
				bookletFormVisible: flag,

				bookletFileList: [],
				bookletfile: null,
			});
		} else {
			this.setState({
				bookletRecord: item,
				bookletFormVisible: flag,
			});
		}
	}

//操作loadingstatus
  _handelLoadingStatus=()=>{
    this.setState({
      loadingstatus:true
    })

  }


	_bookletOk(flag, booklet, modalForm) {
		if (typeof booklet.isFree == 'string') {
			var values = {
				...booklet,
				name: this.state.bookletFile,
				isFree: parseInt(booklet.isFree),
			};
		}
		if (booklet.isFree instanceof Array) {
			if (booklet.isFree.length == 0) {
				var values = {
					...booklet,
					name: this.state.bookletFile,
					isFree: 1,
				};
			} else {
				var aa = booklet.isFree.join();
				var values = {
					...booklet,
					name: this.state.bookletFile,
					isFree: parseInt(aa.substr(aa.length - 1, 1)),
				};
			}
		} else {
			var values = {
				...booklet,
				name: this.state.bookletFile,
				isFree: 1,
			};
		}

 
		if (values.bookletId) {
			this.props.dispatch({
				type: 'content/editBooklet',
				payload: values,
				callback: returnData => this._bookletAddCallback(returnData, modalForm),
			});
		} else {
			this.props.dispatch({
				type: 'content/addBooklet',
				payload: values,
				callback: returnData => this._bookletAddCallback(returnData, modalForm),
			});
		}
	}

	_bookletAddCallback(returnData, modalForm) {
		let oldRecord = this.state.record;
		let oldBookletList = this.state.record.bookletList;

		let newBookletList = [];

		let flag = false;
		if (oldBookletList && oldBookletList.length > 0) {
			for (let i = 0; i < oldBookletList.length; i++) {
				if (oldBookletList[i].bookletId == returnData.bookletId) {
					flag = true;
					newBookletList.push(returnData);
				} else {
					newBookletList.push(oldBookletList[i]);
				}
			}
			if (!flag) {
				newBookletList.push(returnData);
			}
		} else {
			newBookletList.push(returnData);
		}

		oldRecord.bookletList = newBookletList;

		this.setState({
			record: oldRecord,
			bookletFile: null,
			bookletFileList: [],
      bookletFormVisible:false,
      loadingstatus:false
		});
		this._bookletModalVisible(false);
		modalForm.resetFields();
	}

	normFile = e => {
		const isLt1M = e.file.size / 1024 / 1024 < 1;
		if (!isLt1M) {
			this.setState({ fileList: [], file: null });
			return this.state.record && this.state.record.goodsImg ? this.state.record.goodsImg : null;
		}

		if (e.fileList && e.fileList.length > 0) {
			return e && e.file;
		} else {
			return null;
		}
	};

	bookNormFile = e => {
		const isLt1M = e.file.size / 1024 / 1024 < 1;
		if (!isLt1M) {
			this.setState({ bookletFileList: [], bookletFile: null });
			return this.state.bookletRecord && this.state.bookletRecord.bookletImg
				? this.state.bookletRecord.bookletImg
				: null;
		}

		if (e.fileList && e.fileList.length > 0) {
			return e && e.file;
		} else {
			return null;
		}
	};

	render() {
		const { form } = this.props;
		const { record, bookletFormVisible, saveContentLoading ,loadingstatus} = this.state;

		const uploadProps = {
			onRemove: file => {
				this.setState(({ fileList }) => {
					const index = fileList.indexOf(file);
					const newFileList = fileList.slice();
					newFileList.splice(index, 1);
					return {
						fileList: newFileList,
						file: null,
					};
				});
				this.props.form.setFieldsValue({
					name: this.state.record && this.state.record.goodsImg ? this.state.record.goodsImg : null,
				});
			},

			beforeUpload: file => {
				const isLt1M = file.size / 1024 / 1024 < 1;
				if (!isLt1M) {
					message.error('图片大小不能超过1M');
					return false;
				}
				this.setState(({ fileList }) => ({
					fileList: [file],
					file: file,
					image: null,
				}));
				this.props.form.setFieldsValue({
					name: file,
				});
				return false;
			},
			fileList: this.state.fileList,
		};

		return (
			<PageHeaderLayout title="">
				<Card>
					<Form>
						{record ? (
							<FormItem {...formItemLayout} label="名称" style={{ display: 'none' }}>
								{form.getFieldDecorator('goodsId', {
									rules: [{ required: true, message: '请输入名称' }],
									initialValue: record ? record.goodsId : null,
								})(<Input placeholder="请输入名称" />)}
							</FormItem>
						) : null}

						<FormItem {...formItemLayout} label="APP">
							{form.getFieldDecorator('appType', {
								rules: [{ required: true, message: '请选择APP类型' }],
								initialValue: record ? record.appType : null,
							})(
								<RadioGroup onChange={this.handleAppChange}>
									<RadioButton value="1">小萌早教</RadioButton>
									<RadioButton value="2">小萌绘本</RadioButton>
									<RadioButton value="3">萌萌乐卡通</RadioButton>
									<RadioButton value="4">萌萌乐儿歌</RadioButton>
								</RadioGroup>
							)}
						</FormItem>
						<FormItem {...formItemLayout} label="频道">
							{form.getFieldDecorator('channelId', {
								rules: [{ required: true, message: '请选择频道' }],
								initialValue: record ? record.channelId : null,
							})(
								<TreeSelect
									// style={{ width: 300 }}
									// value={this.state.value}
									dropdownStyle={{ maxHeight: 300, overflow: 'auto' }}
									treeData={this.props.channelTree}
									placeholder="请选择"
									treeDefaultExpandAll
									onChange={this.onChange}
								/>
							)}
						</FormItem>

						<FormItem {...formItemLayout} label="封面">
							{/* {form.getFieldDecorator('name', {
                rules: [{ required: true, message: '请选择封面' }],
                initialValue: record ? record.goodsImg : null,
                valuePropName: 'fileList',
              })(<Upload {...uploadProps}>
               
                <Button style={{ marginLeft: '10px' }}>
                  <Icon type="upload" />浏览
              </Button>

              </Upload>)} */}
							{form.getFieldDecorator('name', {
								valuePropName: 'file',
								getValueFromEvent: this.normFile,
								rules: [{ required: true, message: '请选择封面' }],
								initialValue: record ? record.goodsImg : null,
							})(
								<Upload {...uploadProps}>
									<Button>
										<Icon type="upload" /> 浏览
									</Button>
								</Upload>
							)}
							<span style={{ display: 'flex', alignItems: 'center' }}>
								{record && !(this.state.fileList && this.state.fileList.length > 0) ? (
									<img src={imgPrex + record.goodsImg} style={{ width: 50 }} />
								) : null}
							</span>
						</FormItem>
						<FormItem {...formItemLayout} label="限定会员等级：">
							{form.getFieldDecorator('goodsRank', {
								rules: [{ required: true, message: '请选择会员等级' }],
								initialValue: record ? record.goodsRank : null,
							})(
								<CheckboxGroup>
									<Checkbox value={'0'}>普通会员</Checkbox>
									<Checkbox value={'1'}>借阅会员</Checkbox>
									<Checkbox value={'2'}>vip会员</Checkbox>
								</CheckboxGroup>
							)}
						</FormItem>

						<FormItem {...formItemLayout} label="名称">
							{form.getFieldDecorator('goodsName', {
								rules: [
									{
										required: true,
										message: '名称不能为空',
									},
								],
								initialValue: record ? record.goodsName : null,
							})(<Input placeholder="请输入名称" maxLength="100" />)}
						</FormItem>

						{form.getFieldValue('appType') == 1 || form.getFieldValue('appType') == 2 ? (
							<FormItem {...formItemLayout} label="作者">
								{form.getFieldDecorator('authorName', {
									rules: [{ required: true, message: '请选择作者' }],
									initialValue: record ? record.authorName : null,
								})(
									<span>
										<Input
											style={{ width: '83%' }}
											value={this.props.form.getFieldValue('authorName')}
											disabled
										/>
										<Button
											onClick={() => {
												this._setAuthorModalVisible(true);
											}}
										>
											选择
										</Button>
									</span>
								)}
							</FormItem>
						) : null}

						{form.getFieldValue('appType') == 1 || form.getFieldValue('appType') == 2 ? (
							<FormItem {...formItemLayout} label="作者ID" style={{ display: 'none' }}>
								{form.getFieldDecorator('authorId', {
									rules: [{ required: true, message: '请输入名称' }],
									initialValue: record ? record.authorId : null,
								})(<span>{this.props.form.getFieldValue('authorId')}</span>)}
							</FormItem>
						) : null}

						{form.getFieldValue('appType') == 1 || form.getFieldValue('appType') == 2 ? (
							<Row type="flex" justify="start">
								<Col span={6}>
									<FormItem {...priceItemLayout} label="售价">
										{form.getFieldDecorator('discountPrice', {
											rules: [{ required: true, message: '请输入售价' }],
											initialValue: record ? record.discountPrice : null,
										})(
											<InputNumber min={0} step={1.0} precision={2} placeholder="" style={{ width: '100%' }} />
										)}
									</FormItem>
								</Col>
								<Col span={6}>
									<FormItem {...priceItemLayout} label="原价">
										{form.getFieldDecorator('originalPrice', {
											rules: [
												{
													validator: this.checkOriginalPrice,
												},
											],
											initialValue: record ? record.originalPrice : null,
										})(
											<InputNumber min={0} step={1.0} precision={2} placeholder="" style={{ width: '100%' }} />
										)}
									</FormItem>
								</Col>
							</Row>
						) : null}

						{record ? null : (
							<FormItem {...formItemLayout} label="状态">
								{form.getFieldDecorator('goodsSts', {
									rules: [{ required: true, message: '请选择内容状态' }],
									initialValue: record ? record.goodsSts : '1',
								})(
									<RadioGroup>
										<RadioButton value="1">上架</RadioButton>
										<RadioButton value="2">下架</RadioButton>
									</RadioGroup>
								)}
							</FormItem>
						)}

						<FormItem {...formItemLayout} label="标签">
							{form.getFieldDecorator('labelList', {
								rules: [{ required: true, message: '添加标签' }],
								initialValue: record ? record.labelList : [],
							})(<span />)}

							{this.props.form.getFieldValue('labelList')
								? this.props.form.getFieldValue('labelList').map((item, i) => (
										<Button
											style={{ marginLeft: '5px' }}
											icon="delete"
											type={'primary'}
											title={'点击删除'}
											key={i}
											onClick={() => this._deleteTag(item)}
										>
											{item.labelName}
										</Button>
								  ))
								: null}
							<Button
								icon="plus"
								style={{ marginLeft: '5px' }}
								type={'dashed'}
								onClick={() => {
									this._setTagModalVisible(true);
								}}
							>
								添加标签
							</Button>
						</FormItem>
						<FormItem {...formItemLayout} label="权重">
							{form.getFieldDecorator('weight', {
								rules: [{ required: true, message: '请输入权重' }],
								initialValue: record ? record.weight : 1000,
							})(
								<InputNumber
									min={0}
									max={999999}
									step={1}
									precision={0}
									placeholder="请输入权重"
									style={{ width: '100%' }}
								/>
							)}
						</FormItem>

						<FormItem {...formItemLayout} label="简称">
							{form.getFieldDecorator('goodsAbrv', {
								rules: [{ required: true, message: '请输入商品简称' }],
								initialValue: record ? record.goodsAbrv : null,
							})(<Input placeholder="请输入商品简称" />)}
						</FormItem>

						<FormItem {...formItemLayout} label="简介">
							{form.getFieldDecorator('goodsIntr', {
								rules: [{ required: true, message: '请输入商品简介' }],
								initialValue: record ? record.goodsIntr : null,
							})(<Input placeholder="请输入商品简介" />)}
						</FormItem>

						<FormItem {...tailFormItemLayout}>
							<Button type="primary" htmlType="submit" onClick={this.submit} loading={saveContentLoading}>
								保存
							</Button>
							<Button
								type="danger"
								onClick={() => {
									this.props.dispatch(routerRedux.goBack());
								}}
								style={{ marginLeft: '15px' }}
							>
								返回列表
							</Button>
						</FormItem>
					</Form>
				</Card>

				<Card>
					{record ? (
						<Button type={'primary'} onClick={() => this._bookletModalVisible(true)}>
							添加册集
						</Button>
					) : (
						<Button type={'dashed'} disabled>
							添加册集
						</Button>
					)}
					<List rowKey="bookletSeq" grid={{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 2, xl: 4, xxl: 6 }}>
						{record &&
							(record.bookletList && record.bookletList.length > 0) &&
							record.bookletList.map((item, i) => {
								return (
									<List.Item key={item.bookletId}>
										<Card
											style={{ marginLeft: '10px' }}
											title={'第' + item.bookletSeq + '集'}
											style={{ width: 220 }}
											cover={<img style={{ height: '120px' }} alt="example" src={imgPrex + item.bookletImg} />}
											actions={[
												<Button
													icon="edit"
													size="large"
													onClick={() => {
														this._bookletModalVisible(true, item);
													}}
												>
													编辑
												</Button>,
											]}
										>
											<Card.Meta title={'链接：' + item.bookletUrl ? item.bookletUrl : '请填写'} />
										</Card>
									</List.Item>
								);
							})}
					</List>
				</Card>
				{/* <CreateAuthorForm
          title="选择作者"
          {...authorParentMethods}
          modalVisible={authorFormVisible}
        /> */}
				<ChooseAuthorModal
					visible={this.state.authorModalVisible}
					authorList={this.props.content.authorList}
					setAuthorVisible={flag => this._setAuthorModalVisible(flag)}
					authorId={
						this.props.form.getFieldValue('authorId') && this.props.form.getFieldValue('authorId')
					}
					authorSearch={search => {
						this._authorSearch(search);
					}}
					chooseAuthor={author => this._chooseAuthor(author)}
				/>

				<ChooseTagModal
					visible={this.state.tagModalVisible}
					tagList={this.props.content.tagList}
					checkedTags={this.props.form.getFieldValue('labelList')}
					setTagVisible={flag => this._setTagModalVisible(flag)}
					tagSearch={search => {
						this._tagSearch(search);
					}}
					chooseTags={tags => this._chooseTags(tags)}
				/>

				<CreateBookletForm
					title={record ? record.goodsName : null}
					bookletModalVisible={flag => this._bookletModalVisible(flag)}
					bookletOk={(flag, booklet, modalForm) => this._bookletOk(flag, booklet, modalForm)}
					// bookletUploadProps={bookletUploadProps}
					_this={this}
					bookletFileList={this.state.bookletFileList}
					bookletRecord={this.state.bookletRecord}
					goodsId={record ? record.goodsId : null}
					modalVisible={bookletFormVisible}
					bookNormFile={e => this.bookNormFile(e)}
          handelLoadingStatus={ this._handelLoadingStatus}
				/>
			</PageHeaderLayout>
		);
	}
}
